<template>
  <div class="main">
    <el-row>
      <div >
			<span style="font-family: '华文行楷';">
				<h1>宏升酒店点餐管理系统</h1>
			</span>
        <hr />
        <div class="grid-content bg-purple" style="width: 300px; margin: auto; ">

          <el-form  :model="user" :rules="rules" ref="user">
            <el-form-item  label="账号:" prop="username">
              <el-input v-model="user.username" maxlength="5" show-word-limit  clearable></el-input>
            </el-form-item>
            <el-form-item  label="密码:" prop="password">
              <el-input type="password"  v-model="user.password" maxlength="10" show-word-limit  clearable show-password></el-input>
            </el-form-item>
            <el-form-item  prop="type" label="类型">
              <el-select v-model="user.roleid" placeholder="请选择类型">
                <el-option label="学生" value="1"></el-option>
                <el-option label="管理员" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-button type="info" @click="login('user')" plain>登陆</el-button>
            <el-button type="info" @click="toregister()" plain>注册</el-button>
          </el-form>
        </div>
      </div>
    </el-row>
  </div>

</template>
<script>
  import {login} from "@/network/form";

  export default {
    data() {
      return { options: [{
          roleid: 1,
          label: '用户'
        }, {
          roleid: 2,
          label: '管理员'
        }],
        labelPosition: 'left',
        user: {
          username: '',
          password: '',
          roleid: '1'
        },
        rules: {
          username: [
            {required: true, message: '请输入账号', trigger: 'blur'},
            {min: 0, max: 10, message: '长度在 0 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'}
          ]
        }

      };
    },
    methods: {
      login (user) {
        this.$refs[user].validate((valid) => {
          if (valid){
            login (this.user).then(res =>{
              console.log(res)
              if (res.success) {
                localStorage.setItem("Authorization",res.data);
                if(this.user.roleid == 1 && this.user.username != 'admin'){

                  console.log(res.data)
                  this.$router.push('/form/childcomps/introduction')
                }else if(this.user.roleid == 2 && this.user.username == 'admin'){
                  this.$router.push('/form/mainroot')
                }
              }else {
                // console.log(res.data.message)
                this.$message.error('登录失败：'+res.message);
              }
            })
          } else {
            return false;
          }
        });
      },
      toregister() {
        this.$router.push('/form/regist')
      }
    }
  }
</script>

<style scoped>
  .main {
    background-color: beige;
    height: 700px;
  }

</style>
